var baseConfig = {
  title: "大屏数据分析",
};

function updateCustomer(vp, opts) {
  const addSort = () => {
    const count = opts.series[0].data.length;
    let htmls = `<div class="dept-sort">[[dynamicHtml]]</div>`;
    const colorMap = ["#ff0000", "#ff7200", "#ffbd5e", "#b3b3b3", "#597a9f"];

    const dynamicHtml = opts.series[0].data.reduce((pre, cur, inx) => {
      pre += `
      <div class="dept-sort-item" style="height:${100 / count}%">
        <span class="dept-sort-item-num" style="background:${colorMap[inx]}">${
        inx + 1
      }</span>
      </div>`;
      return pre;
    }, "");
    htmls = htmls.replace("[[dynamicHtml]]", dynamicHtml);
    $(`#${vp}-chart`).before(htmls);
  };
  const funcs = {
    deptorder: addSort,
    deptsendout: addSort,
    notes: () => {
      const explist = [
        { name: "张三", tip: "完成了工序HB2541", type: "", dt: "11:25" },
        { name: "张三", tip: "完成了工序HB2541", type: "", dt: "11:25" },
        { name: "张三", tip: "完成了工序HB2541", type: "", dt: "11:25" },
        { name: "张三", tip: "完成了工序HB2541", type: "", dt: "11:25" },
        { name: "张三", tip: "完成了工序HB2541", type: "", dt: "11:25" },
        { name: "张三", tip: "完成了工序HB2541", type: "", dt: "11:25" },
        { name: "张三", tip: "完成了工序HB2541", type: "", dt: "11:25" },
        { name: "张三", tip: "完成了工序HB2541", type: "", dt: "11:25" },
        { name: "张三", tip: "完成了工序HB2541", type: "", dt: "11:25" },
        { name: "张三", tip: "完成了工序HB2541", type: "", dt: "11:25" },
      ];
      const htmlStr = explist.reduce((pre, cur) => {
        pre += `
        <div class="note-list-item">
          <div class="note-list-item-name" >${cur.name}</div> 
          <div>${cur.tip}</div>
          <div class="note-list-item-dt">${cur.dt}</div>
        </div>`;
        return pre;
      }, `<div style="height:20px;width:100%;"></div>`);
      $("#notes-out-wrap .base-in-wrap").html(htmlStr);
    },
    sendout: () => {
      explist =  [
        {
          workerCode: "0004",
          workerName: "林均炫",
          detail: [
            {
              customerName: "客户1",
              qty: "100",
            },
            {
              customerName: "客户2",
              qty: "200",
            },
          ],
          inCount: 4,
          inQty: 419,
          orderQty: 448,
          orderCount: 30,
          finishQty: 448,
          finishCount: 30,
          unfinishQty: 0,
          unfinishCount: 0,
        },
        {
          workerCode: "0011",
          workerName: "陈少文",
          detail: [],
          inCount: "0",
          inQty: "0",
          orderQty: 1682,
          orderCount: 80,
          finishQty: 1682,
          finishCount: 80,
          unfinishQty: 0,
          unfinishCount: 0,
        },
      ];

      const htmlStr = explist.reduce((pre, cur) => {
        pre += `
        <div class="sendout-list-item">
          <div class="sendout-list-item-name" >${cur.workerName}</div> 
          <div>订单量/总数<span style="float:right;">${cur.orderCount}/${cur.orderQty}</span></div>
          <div>完单量/总数<span style="float:right;">${cur.finishCount}/${cur.finishQty}</span></div>
        </div>`;
        return pre;
      }, ``);
      $("#sendout-out-wrap .base-in-wrap").html(htmlStr);
    },
    sales: () => {
      const explist = [
        { name: "023-咖啡-32-M", price: 58, count: 10 },
        { name: "023-咖啡-32-M", price: 58, count: 10 },
        { name: "023-咖啡-32-M", price: 58, count: 10 },
        { name: "023-咖啡-32-M", price: 58, count: 10 },
        { name: "023-咖啡-32-M", price: 58, count: 10 },
        { name: "023-咖啡-32-M", price: 58, count: 10 },
        { name: "023-咖啡-32-M", price: 58, count: 10 },
        { name: "023-咖啡-32-M", price: 58, count: 10 },
        { name: "023-咖啡-32-M", price: 58, count: 10 },
        { name: "023-咖啡-32-M", price: 58, count: 10 },
        { name: "023-咖啡-32-M", price: 58, count: 10 },
        { name: "023-咖啡-32-M", price: 58, count: 10 },
      ];

      const iconMap = ["#icon-jinpai", "#icon-a-149", "#icon-tongpai"];

      const htmlStr = explist.reduce((pre, cur, inx) => {
        console.log("inx", inx);
        let rowStr = `
        <div class="sales-ranking-item" style="margin-left:${
          (Math.random() * 36 + 2) | 0
        }px">
          [[sortTag]]
          <div style="margin-left:12px;">${cur.name}</div>
          <div style="margin-left:12px;">￥${cur.price}</div>
          <div style="margin-left:12px;">${cur.count}</div>       
        </div>`;

        if (inx < 3) {
          rowStr = rowStr.replace(
            `[[sortTag]]`,
            `<svg class="x2-icon" aria-hidden="true">
              <use xlink:href="${iconMap[inx]}"></use>
            </svg>
            <div style="font-weight:bold;">No-${inx + 1}</div>`
          );
        } else {
          rowStr = rowStr.replace(
            `[[sortTag]]`,
            `<div style="font-weight:bold;">No-${inx + 1}</div>`
          );
        }

        pre += rowStr;
        return pre;
      }, `<div style="height:20px;width:100%;"></div>`);
      $("#sales-out-wrap .base-in-wrap").html(htmlStr);
    },
  };

  funcs[vp] && funcs[vp]();
}

function getOpt(chartName) {
  const mergeMethods = {
    deptorder: async () => {
      // const res = await axios.get(`/api/login/getver`)
      // console.log(res)
      return {
        color: ["#7ecef4"],
        backgroundColor: "rgba(1,202,217,.2)",
        grid: {
          left: 40,
          right: 20,
          top: 30,
          bottom: 0,
          containLabel: true,
        },

        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0)",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0)",
            },
          },
          axisLabel: {
            color: "rgba(255,255,255,0)",
          },
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.5)",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
          axisLabel: {
            color: "rgba(255,255,255,.5)",
          },
          data: ["部门3", "部门1", "部门2", "部门5", "部门4"],
        },
        series: [
          {
            name: "2011年",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "rgba(230,253,139,.7)" },
                  { offset: 1, color: "rgba(41,220,205,.7)" },
                ]),
              },
            },
            label: {
              normal: {
                show: true,
                position: "insideRight",
              },
            },
            data: [18203, 23489, 29034, 104970, 131744],
          },
        ],
      };
    },
    deptsendout: async () => {
      // const res = await axios.get(`/api/login/getver`)
      // console.log(deptSendRanking)
      return {
        color: ["#7ecef4"],
        backgroundColor: "rgba(1,202,217,.2)",
        grid: {
          left: 40,
          right: 20,
          top: 30,
          bottom: 0,
          containLabel: true,
        },

        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0)",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0)",
            },
          },
          axisLabel: {
            color: "rgba(255,255,255,0)",
          },
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.5)",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
          axisLabel: {
            color: "rgba(255,255,255,.5)",
          },
          data: ["部门3", "部门1", "部门2", "部门5"],
        },
        series: [
          {
            name: "2011年",
            type: "bar",
            barWidth: 20,
            label: {
              normal: {
                show: true,
                position: "insideRight",
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "rgba(230,100,100,.7)" },
                  { offset: 1, color: "rgba(41,220,205,.7)" },
                ]),
              },
            },
            data: [18203, 23489, 29034, 104970],
          },
        ],
      };
    },
    creater: async () => {
      const opts = {
        backgroundColor: "rgba(1,202,217,.2)",
        grid: {
          left: 60,
          right: 60,
          top: 70,
          bottom: 40,
        },

        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          top: 10,
          textStyle: {
            fontSize: 10,
            color: "rgba(255,255,255,.7)",
          },
          data: ["2017年", "2018年", "同比增速"],
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
            axisLabel: {
              color: "rgba(255,255,255,.7)",
            },

            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: 250,
            interval: 50,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.3)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.01)",
              },
            },

            axisLabel: {
              formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "",
            max: 25,
            interval: 5,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.3)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
            axisLabel: {
              formatter: "{value} °C",
            },
          },
        ],
        series: [
          {
            name: "2017年",
            type: "bar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#b266ff" },
                  { offset: 1, color: "#121b87" },
                ]),
              },
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: "2018年",
            type: "bar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#00f0ff" },
                  { offset: 1, color: "#032a72" },
                ]),
              },
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "同比增速",
            type: "line",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#fffb34" },
                  { offset: 1, color: "#fffb34" },
                ]),
              },
            },
            yAxisIndex: 1,
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
          },
        ],
      };
      return opts;
    },
  };
  if (mergeMethods[chartName]) return mergeMethods[chartName]();
  return Promise.resolve(false);
}
